.space {
    width: 30%;
    height: 250px;
    // height: 300px;
    margin-bottom: 30px;
    background: linear-gradient(
      270deg,
      rgba(20, 49, 46, 0.95),
      rgba(28, 28, 28, 0.44)
    );
    border-radius: 5px;
    //box-shadow: 0px 0px 5px 1px #000000;
    box-shadow: inset 0px 0px 1px 1px #00000050;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    &:hover {
      //box-shadow: 0px 0px 5px 1px #22ffe5, inset 1px 1px 20px 1px #22ffe5;
      box-shadow: unset;
      background: linear-gradient(
        90deg,
        rgba(20, 49, 46, 0.95),
        rgba(28, 28, 28, 0.44)
      );
      //border: 1px solid #22ffe5;
      box-shadow: inset 0px 0px 1px 1px #22ffe5;
      .removeIcon {
        opacity: 1;
      }

      .editIcon {
        opacity: 1 !important;
      }

      .image img {
        //transform: scale(1.5);
        opacity: 1;
      }

      .information .btn_forward {
        background: linear-gradient(315deg, #22ffe5 50%, #00000000 50%);
      }
    }

    &:active {
      transition: all 0.1s ease-in-out;
      opacity: 0.5;
    }

    .newText {
      position: absolute;
      top: 2%;
      left: 2%;
      z-index: 999;
      color: #ffd700;
      font-style: italic;
    }
    .removeIcon {
      position: absolute;
      top: 3%;
      right: 2%;
      z-index: 999;
      transition: all 0.3s ease-in-out;
      opacity: 0;
      cursor: pointer;

      &:hover {
        transform: scale(2);
        color: #ff004c !important;
      }
    }

    .image {
      height: 75%;
      width: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      background-color: #00000080;
      cursor: pointer;

      img {
        width: 40%;
        //height: 50%;
        max-width: 40%;
        //max-height: 50%;
        transition: all 0.3s ease-in-out;
        margin: auto;
        opacity: 0.5;
        filter: drop-shadow(3px 3px 1px #000000);
      }

      .space_type {
        position: absolute;
        bottom: 0;
        right: 2%;
        max-width: 80%;

        h2 {
          font-size: 2em;
          font-weight: bold;
          color: #ffffff90;
          font-style: italic;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .information {
      height: 25%;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px 20px;
      position: relative;

      .space_name {
        display: flex;
        gap: 10px;
        align-items: center;

        h2 {
          max-width: 70%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .editIcon {
          z-index: 999;
          opacity: 0;
          transition: all 0.3s ease-in-out;
          cursor: pointer;

          &:hover {
            transform: scale(2);
            color: #ffd700;
          }
        }
      }

      .space_title {
      }

      .space_date {
        color: #ffffff80;
        font-style: italic;
        font-weight: bold;
      }

      .btn_forward {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50px;
        height: 50px;
        background: linear-gradient(315deg, #ffd700 50%, #00000000 50%);
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        color: #000000 !important;
        font-size: 18px !important;
        font-weight: bold !important;
        padding-right: 5px;
        padding-bottom: 3px;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
      }
    }
  }



  <div
  class="space"
  v-for="(spaceinfo, index) in mySpaceList"
  :key="index"
>
  <div
    class="newText"
    v-if="
      new Date(spaceinfo.spaceDate) >=
      new Date().setDate(new Date().getDate() - 1)
    "
  >
    <h2>New !!</h2>
  </div>
  <!-- <div class="removeIcon" title="Remove Space" v-if="btnEnable"
    @click="removeSpaceModal = true; removeBtnStatus = false; removeSpaceInfo = spaceinfo">
    <Icon type="md-close" :size="15" />
  </div> -->
  <div class="" style="height: 100%">
    <div
      class="image"
      @click="handleSpaceClick(spaceinfo)"
      title="Click to access"
    >
      <img :src="spaceinfo.spaceImage" alt="" />
      <div class="space_type">
        <h2>{{ spaceinfo.spaceType }}</h2>
      </div>
    </div>
    <div class="information">
      <div class="space_name" :title="spaceinfo.spaceName">
        <h2>{{ spaceinfo.spaceName }}</h2>
        <!-- <div class="editIcon" title="Edit Space" v-if="btnEnable"
          @click="editSpaceModal = true; editBtnStatus = false; editSpaceInfo = spaceinfo; newSpaceName = spaceinfo.spaceName">
          <Icon type="md-create" :size="15" />
        </div> -->
      </div>
      <div class="space_date">{{ spaceinfo.spaceDate }}</div>
      <div class="btn_forward">
        <div
          @click="handleSpaceClick(spaceinfo)"
          title="Click to access"
        >
          <Icon type="md-arrow-round-forward" />
        </div>
      </div>
    </div>
  </div>
</div>